<template>
  <div class="wrapper">
    <ul class="nav nav-tabs ur-nav-tabs d-flex justify-content-around">
      <li class="nav-item w120" @click="navFun(item.id)" v-for="(item,index) in navs" >
        <a class="nav-link" :class="{active:item.id==curNavIndex}" style="padding:inherit">
          <div>
            <i class="d-block iconfont font20" :class="'icon'+item.icon"></i>{{item.name}}
          </div>
        </a></li>
    </ul>
    <div style="width: 100%;height: 10px;background: #0D1B54;"></div>
    <div class="tab-pane p-3">
      <div class="pr-1 py-3" v-if="curNavIndex==1">
        <div class="titleGroup w-100">
          <label class="txt" style="line-height: 24px">名称</label>
          <label style="line-height: 24px">{{pole.PoleNo}}</label>
        </div>
       <!-- 灯具1 -->
        <div v-for="(o,poleIndex) in pole.BulbCount">
          <div class="p_relative d-flex align-items-center justify-content-between mt-3" style="padding:0 15px">
            <i class="iconfont icon-deng" style="color:#FF8114;font-size: 40px;text-shadow: 0 0 6px #FF8114;"></i>
            <label class="p_absolute text-white" style="top:9px;left: 30px;">{{poleIndex+1}}</label>
            <el-progress class="w220 mr-3 dimmingLevel" :text-inside="true" :stroke-width="20" :percentage="percentages[poleIndex]"></el-progress>
            <el-input v-model="lightLevel[poleIndex]" size="small" class="w50"></el-input>
          </div>
          <div class="dimming-group d-flex justify-content-between mt-4" style="padding:0 15px">
            <el-button v-for="(item,index) in levels" :disabled="btnState" class="ur-btn" :class="{active:lightLevelActive[poleIndex]==index}" @click="dimmingFun(item,poleIndex,index)" :key="'lamp1_'+index">{{item.name}}</el-button>
            <el-button :disabled="btnState" class="ur-btn" :class="{active:lightLevelActive[poleIndex]==6}" @click="dimmingFun({},poleIndex,6)">调光</el-button>
          </div>
        </div>
        <!--电压 电流-->
        <div class="scrollY mt-3">
          <el-table :data="UIList" tooltip-effect="dark" :height="95">
            <el-table-column  prop="BulbU" label="电压" align="center" min-width="120"></el-table-column>
            <el-table-column  prop="BulbI" label="电流" align="center" min-width="110"></el-table-column>
            <el-table-column  prop="BulbP" label="功率" align="center" min-width="120"></el-table-column>
            <el-table-column  prop="BulbPF" label="功率因素" align="center" min-width="110"></el-table-column>
          </el-table>
        </div>

       <!--更新时间-->
        <div class="d-flex justify-content-between align-items-center mt-2">
          <div class="titleGroup ">
            <label class="txt" style="line-height: 24px">更新时间</label>
            <label style="line-height: 24px">{{pole.UpTime}}</label>
          </div>
          <el-button  class="ur-btn iconTxt w100" @click="refreshPole" :disabled="btnState" :class="{'refresh':!btnState}">
            <i class="iconfont icon-refresh font18"></i>刷新
          </el-button>
        </div>

        <!--状态-->
        <div class="titleGroup w-100 mt-3">
          <label class="txt" style="line-height: 24px">状态</label>
         <!-- <div class="d-flex mt-2">
            <label><i class="iconfont icon-deng font24" style="color:#FF7700;text-shadow: 0 0 6px #EC7003;"></i>灯开</label>
            <label><i class="iconfont icon-deng font24" style="color:#FF7700;text-shadow: 0 0 6px #EC7003;"></i>灯开</label>
          </div>-->
          <ul class="mt-2" style="padding-left: 29px;">
            <template v-for="(item,index) in BulbState">
              <li class="pulbState state0 t-blue" v-if="item==0">关灯</li>
              <li class="pulbState state1 t-blue" v-else-if="item==1">亮灯</li>
              <li class="pulbState state2 t-blue" v-else-if="item==2">故障</li>
              <li class="pulbState state3 t-blue" v-else-if="item==3">不存在</li>
              <li class="pulbState state4 t-blue" v-else>超时</li>
            </template>
          </ul>
        </div>

      </div>
      <!--基本信息-->
      <div class="d-flex justify-content-around pr-1 py-4" v-if="curNavIndex==2">
        <div class="deviceImg"><img :src="poleImgSrc"></div>
        <div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">UID</label>
            <label style="line-height: 24px">{{pole.TnAddr}}</label>
          </div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">所属集中器</label>
            <label style="line-height: 24px">{{pole.BoxName}}</label>
          </div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">区域</label>
            <label style="line-height: 24px">{{pole.RegionName}}</label>
          </div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">所属线路</label>
            <label style="line-height: 24px">{{pole.LineNo}}</label>
          </div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">厂家</label>
            <label style="line-height: 24px">{{pole.PoleManufacturer}}</label>
          </div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">经度</label>
            <label style="line-height: 24px">{{pole.Lng}}</label>
          </div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">纬度</label>
            <label style="line-height: 24px">{{pole.Lat}}</label>
          </div>
          <div class="titleGroup">
            <label class="txt" style="line-height: 24px">安装时间</label>
            <label style="line-height: 24px">{{pole.InstallDate}}</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import fetch from 'api/fetch'
  import {mapState} from 'vuex'

  export default {
    components: {},
    props: {
      selPole:{
        type:Object,
        default:{}
      },
      poleImg:''
    },
    data() {
      return {
        curNavIndex:1,
        percentages:[],
        lightLevel:[],
        lightLevelActive:[0,0,0],
        navs:[
          {id:1,name:'单灯控制',icon:'kongzhi'},
          {id:2,name:'基本信息',icon:'info'},
        ],
        levels:[
          {name:'关',level:0},{name:'20',level:20},{name:'40',level:40},
          {name:'60',level:60},{name:'80',level:80},{name:'开',level:100}
        ],
        UIList:[{ BulbU: '--', BulbI: '--', BulbP: '--', BulbPF: '--' }],
        BulbState:[],
        LightNos:[],
        pole:this.selPole,
        poleImgSrc:''
      }
    },
    watch: {
      lightLevel(v){
        let levels=[].concat(v)
        for (let i = 0; i < levels.length; i++) {
          this.percentages[i] = (levels[i] - 0)>100?100:(levels[i] - 0)
        }
      },
      selPole:{
        handler(newValue, oldValue) {
          this.pole = newValue
          this.queryPoleDetail()
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        btnState:state => state.user.btnState,
      })
    },
    methods: {
      navFun(index){
        this.curNavIndex=index
      },
      dimmingFun(v,poleIndex,btnIndex){
        // this.$store.commit('user/SET_BTN_STATE',true)
        if(!this.common.isEmpty(v)) this.$set(this.lightLevel, poleIndex, v.level)
        this.$set(this.lightLevelActive, poleIndex, btnIndex)
        if (btnIndex == 0) {
          this.lightOff(poleIndex)
        } else if (btnIndex == 5) {
          this.lightOn(poleIndex)
        } else {
          this.lightDimming(poleIndex)
        }
      },
      lightOff(lightNo) {
        api.fetchSimple('/Communication/LightOffSingle', {
          EccAddr: this.pole.EccAddr,
          TnAddr: this.pole.TnAddr,
          LightNos: [lightNo + 1]//this.LightNos
        }).then(r => {
          this.$store.commit('user/SET_BTN_STATE', false)
          if (r.Action === 'Timeout') {
            this.$message.error({showClose: true, message: '超时'})
          } else {
            if (r.CmdState === 0) {
              this.$message.success({showClose: true, message: '关灯成功'})
            } else {
              this.$message.error({showClose: true, message: this.global.cmdStatus[r.CmdState]})
            }
          }
        })
      },
      lightOn(lightNo){
        api.fetchSimple('/Communication/LightOnSingle', {
          EccAddr: this.pole.EccAddr,
          TnAddr: this.pole.TnAddr,
          LightNos: [lightNo+1]//this.LightNos
        }).then(r => {
          this.$store.commit('user/SET_BTN_STATE', false)
          if (r.Action === 'Timeout') {
            this.$message.error({showClose: true, message: '超时'})
          } else {
            if (r.CmdState === 0) {
              this.$message.success({showClose: true, message: '开灯成功'})
            } else {
              this.$message.error({showClose: true, message: this.global.cmdStatus[r.CmdState]})
            }
          }
        })
      },
      lightDimming(lightNo){
        let levels=[].concat(this.lightLevel)
        api.fetchSimple('/Communication/LightDimmingSingle',{
          EccAddr: this.pole.EccAddr,
          TnAddr: this.pole.TnAddr,
          LightNos: [lightNo+1],
          LightLevel: (levels[lightNo] / 5).toFixed(0)
        }).then(r=>{
          this.$store.commit('user/SET_BTN_STATE', false)
          if (r.CmdState === 0) {
            this.$message.success({showClose:true,message:'调光成功'})
          }else{
            this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
          }
        })
      },
      //更新灯状态
      loadBulbState (type) {
        if (!type) { //查询数据库
          this.BulbState = []
          for (var i = 1; i <= this.pole.BulbCount; i++) {
            this.LightNos.push(i)
            this.BulbState.push(this.pole['Bulb' + i + 'State'])
          }
        } else { //实时查询
          this.$store.commit('user/SET_BTN_STATE', true)
          api.fetchSimple('/Communication/LightQuerySingle', {
            EccAddr: this.pole.EccAddr,
            TnAddr: this.pole.TnAddr,
            LightNos: this.LightNos
          }).then(r=>{
            this.$store.commit('user/SET_BTN_STATE', false)
            if (r.CmdState === 0) {
              this.BulbState = [],this.lightLevel=[]
              for (var i = 0; i < this.pole.BulbCount; i++) {
                this.BulbState.push(r.LightState[i])
                this.lightLevel.push(r.LightLevel[i]*5)
              }
            }else{
              this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
            }
          })
        }
      },
      //刷新灯杆数据
      loadPole(){
        api.fetchSimple('/Communication/TnRealData',{EccAddr:this.pole.EccAddr,TnAddr:this.pole.TnAddr})
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE', false)
              if (r.CmdState === 0) {
                if (r.Action == "TimeOut") {
                  this.UIList = [{ BulbU: '--', BulbI: '--', BulbP: '--', BulbPF: '--' }]
                  this.$message.error({showClose:true,message:'超时'})
                } else {
                  var poleU = [], poleI = [], poleP = [], polePF = []
                  for (var i = 1; i <= this.pole.BulbCount; i++) {
                    if (r['V' + i] != undefined) { poleU.push(r['V' + i]) }
                    if (r['I' + i] != undefined) { poleI.push(r['I' + i]) }
                    if (r['P' + i] != undefined) { poleP.push(r['P' + i]) }
                    if (r['PF' + i] != undefined) { polePF.push(r['PF' + i]) }
                  }
                  this.UIList = [{ BulbU: poleU.join(','), BulbI: poleI.join(','), BulbP: poleP.join(','), BulbPF: polePF.join(',')}]
                  this.$set(this.pole,'UpTime',r.ReportTime)
                  // this.$message.success({showClose:true,message:'查询成功'})
                }
              }
              else {
                this.UIList = [{ BulbU: '--', BulbI: '--', BulbP: '--', BulbPF: '--' }]
                let message=this.global.cmdStatus[r.CmdState]?this.global.cmdStatus[r.CmdState]:'查询失败'
                this.$message.error({showClose:true,message:message})
              }
            })
      },
      refreshPole(){
        this.$store.commit('user/SET_BTN_STATE', true)
        this.loadBulbState(true)
        this.loadPole()
      },
      queryPoleDetail(){
        this.lightLevel=[]
        api.fetchSimple('/ViewInfo/QueryPoleDetail',{poleId:this.pole.PoleId})
            .then(r=>{
              this.pole=r[0]
              var poleU = [], poleI = [], poleP = [], polePF = []
              for (var i = 1; i <= this.pole.BulbCount; i++) {
                poleU.push(this.pole['Bulb' + i + 'U'])
                poleI.push(this.pole['Bulb' + i + 'I'])
                poleP.push(this.pole['Bulb' + i + 'P'])
                polePF.push(this.pole['Bulb' + i + 'PF'])
                this.$set(this.lightLevel, i - 1, this.pole['Bulb' + i + 'Level']*5)
              }
              this.UIList = [{ BulbU: poleU.join(','), BulbI: poleI.join(','), BulbP: poleP.join(','), BulbPF: polePF.join(',') }]
              this.loadBulbState(false)//灯泡状态
            })
      },
    },
    created() {
      this.$store.commit('user/SET_BTN_STATE', false)
      this.queryPoleDetail()
      let bulbState = fetch.getBulbState(this.selPole)
      let poleImgMap = fetch.poleImgMax()
      this.poleImgSrc = poleImgMap.get(bulbState + 'bulb_max')
      this.poleImgSrc=this.poleImgSrc.replace(/max/, "max")
    },
    mounted() {
    },
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .titleGroup{
    label{
      display:block;line-height :22px;padding-left :29px;color:#D8D8D8
      &.txt{color:#6B82CB;font-size:12px;}
    }
  }
  .dimming-group .ur-btn{
    width 40px;height 28px;line-height 28px;text-align:center;color :#BFCFEF;
    &.active{background:rgba(49,62,92,1);}
  }
  .deviceImg{width:100px; height:100px; background:rgba(49,62,92,0.2);text-align :center;line-height :100px;}

  .pulbState{display: inline-block;/*width:13px;*/padding-left:20px;height:17px;line-height:17px;font-size: 12px;}
  .pulbState{margin-right: 16px;}
  .pulbState:last-child{margin-right: 0;}
  .pulbState.state0{background: url("~static/image/map/pulbState0.png") no-repeat;background-size: contain;}
  .pulbState.state1{background: url("~static/image/map/pulbState1.png") no-repeat;background-size: contain;}
  .pulbState.state2{background: url("~static/image/map/pulbState2.png") no-repeat;background-size: contain;/*width:17px;*/height:18px;}
  .pulbState.state3{background: url("~static/image/map/pulbState3.png") no-repeat;background-size: contain;/*width:18px;*/height:15px;}
  .pulbState.state4{background: url("~static/image/map/pulbState4.png") no-repeat;background-size: contain;/*width:18px;*/height:15px;}
  .refresh_disabled,.reboot_disabled{color:#565E76;}
  .refresh {
    i{color:#81D862;text-shadow:0 0 6px #81F6FF;}
  }
  .reboot{
    i{color: #E72424;text-shadow: 0 0 6px #EE0603}
  }
</style>
